<template>
  <div>
    <div style="padding-left: 30px;padding-right: 30px" >
      <el-form :inline="true" :model="loginLogDto"  class="demo-form-inline">

        <el-row :gutter="20">
<!--          操作人-->
          <el-col :span="8">
            <!--输入框-->
            <el-form-item label="操作人：">
              <el-input v-model="loginLogDto.user_name"  placeholder="操作人"></el-input>
            </el-form-item>
          </el-col>
          <!--       当前地区 -->
          <el-col :span="8">
            <el-form-item label="地区：">
              <el-input v-model="loginLogDto.location" placeholder="ip"></el-input>
            </el-form-item>
          </el-col>

<!--          当前ip-->
          <el-col :span="8">
            <el-form-item label="ip：">
              <el-input v-model="loginLogDto.request_ip" placeholder="ip"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <!--        date-->
            <el-date-picker
              v-model="value1"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-col>

          <el-col :span="8">
            <!--查询按钮-->
            <el-form-item>
              <el-button type="primary" @click="page">查询</el-button>
            </el-form-item>

          </el-col>
        </el-row>
      </el-form>
    </div>
    <div>
      <!--      表格显示-->
      <el-table :data="Data" border style="width: 100%" ref="multipleTable" >
        <el-table-column
          prop="userName"
          label="姓名"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="requestIp"
          label="IP"
        ></el-table-column>
        <el-table-column
          prop="browser"
          label="浏览器"
        ></el-table-column>
        <el-table-column
          prop="browserVersion"
          label="浏览器版本"
        ></el-table-column>
        <el-table-column
          prop="location"
          label="地区"
        ></el-table-column>
        <el-table-column
          prop="loginDate"
          label="登录时间"
        ></el-table-column>

        <el-table-column
          prop="description"
          label="描述"
        ></el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button slot="reference" size="mini"
                       type="text"
                       @click="del(scope.row.id)"
            >删除</el-button>


          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="size"
        @current-change="curren"
        :current-page="loginLogDto.pageNum"
        :page-sizes="[5, 10, 20, 30]"
        :page-size=this.loginLogDto.pageSize
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>

    </div>
  </div>
</template>

<script>
import user from '@/store/getters'
import { pageLoginLog,deleteLoginLog } from "@/api/pd-auth/developer/loginLog";

export default {
  data(){
    return{
      value1:[],
      loginLogDto:{
        user_name:"",
        request_ip:"",
        location:"",
        beginTime:"",
        endTime:"",
        pageNum:1,
        pageSize:10,
      },
      Data:[],
      total:0,
    }
  },

  //创建生命周期树
created() {
    this.page()
},

  methods:{
    page(){
      if (this.value1===null) {
        this.loginLogDto.beginTime = ''
        this.loginLogDto.endTime = ''
      }else {
        if (this.value1.length > 0) {
          this.loginLogDto.beginTime = this.value1[0]
          this.loginLogDto.endTime = this.value1[1]
        }
      }
      pageLoginLog(this.loginLogDto).then(res => {
        this.Data=res.data.list
        this.total=res.data.total
      })


    },

    //删除
    del(id){
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'

      }).then(() => {
        deleteLoginLog(id)
        this.total2()
        this.page()
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //判断删除的数据是否为最后一页且最后一页只有一条数据
    total2(){
      pageLoginLog(this.loginLogDto).then(as=>{
        if (this.total!=as.data.total() && this.optLoginDto.pageNum==this.total && this.total!=1){
          this.total=this.loginLogDto.pageNum-1
        }
      })
    },


    size(val) {
      this.loginLogDto.pageSize = val
      this.page()
    },

    curren(val) {
      this.loginLogDto.pageNum=val
      this.page()
    },

  }
}
</script>
